<template>
  <div class="relative w-full h-full">
    <PageHeader :title="$t('feedback.意见反馈')" />
    <el-radio-group v-model="type" class="mb12" @change="getDataList">
      <el-radio-button :label="$t('feedback.新增意见反馈列表')" :value="0" />
      <el-radio-button :label="$t('feedback.已处理意见反馈')" :value="1" />
    </el-radio-group>
    <div class="flex_aic_jcsb">
      <div class="flex_aic">
        <div class="flex_aic">
          <span class="color-555555 mr8">{{ $t('feedback.反馈时间') }}</span>
          <el-date-picker
            v-model="filters.date"
            type="daterange"
            :range-separator="$t('feedback.至')"
            :start-placeholder="$t('feedback.开始日期')"
            :end-placeholder="$t('feedback.结束日期')"
            style="width: 280px"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="flex_aic">
        <el-button @click="reset">{{ $t('feedback.重置') }}</el-button>
        <el-button type="primary" @click="getDataList">{{ $t('feedback.查询') }}</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table mt12"
      height="calc(100% - 200px)"
      border
      v-loading="loading"
    >
      <el-table-column :label="$t('feedback.序号')" width="80">
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="content" :label="$t('feedback.反馈信息')" />
      <el-table-column prop="vipNickName" :label="$t('feedback.反馈人')" />
      <el-table-column prop="vipPhone" :label="$t('feedback.反馈人手机号')" />
      <el-table-column prop="createdTime" :label="$t('feedback.反馈时间')">
        <template #default="{ row }">
          {{ moment(row.createdTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('feedback.操作')">
        <template #default="scope">
          <div class="operationBtnRow">
            <el-button
              type="text"
              @click="handleEdit(scope.row)"
              v-if="scope.row.status == 0"
              v-my-point="'feedback:edit'"
              >{{ $t('feedback.查看并处理') }}</el-button
            >
            <el-button
              type="text"
              @click="handleEdit(scope.row)"
              v-if="scope.row.status == 1"
              >{{ $t('feedback.查看') }}</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-end mt24 absolute bottom-0 right-0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <EditDia
      v-model="editDiaVisible"
      :data="editDiaData"
      :type="type"
      @restTable="getDataList"
    ></EditDia>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import EditDia from "./editDia.vue";
import Api from "@/config/api/api";
import moment from "moment";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const filters = ref({
  searchKey: "",
  status: "",
  date: [],
});
const type = ref(0);
const statusList = ref([
  { label: "即将到期", value: 1 },
  { label: "到期未缴纳", value: 2 },
  { label: "已缴纳", value: 3 },
]);
const editDiaVisible = ref(false);
const editDiaData = ref({});
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);
const loading = ref(false);
const handleEdit = (row) => {
  editDiaVisible.value = true;
  editDiaData.value = JSON.parse(JSON.stringify(row));
};
const handleSizeChange = (size) => {
  pageSize.value = size;
  getDataList();
};
const handleCurrentChange = (page) => {
  currentPage.value = page;
  getDataList();
};
const reset = () => {
  currentPage.value = 1;
  pageSize.value = 10;
  filters.value.date = [];
  getDataList();
};

const getDataList = () => {
  loading.value = true;
  Api.feedbackList({
    page: currentPage.value - 1,
    pageSize: pageSize.value,
    status: type.value,
    createdTimeStart:
      filters.value.date?.[0] &&
      moment(filters.value.date[0]).format("YYYY-MM-DD 00:00:00"),
    createdTimeEnd:
      filters.value.date?.[1] &&
      moment(filters.value.date[1]).format("YYYY-MM-DD 23:59:59"),
  })
    .then((res) => {
      tableData.value = res.data.content || [];
      total.value = Number(res.data.totalElements || 0);
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  getDataList();
});
</script>

<style lang="scss" scoped>
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.split {
  width: 1px;
  height: 12px;
  background: #ddd;
  margin: 0 5px;
}
</style>
